<template>
  <div class="business-top">
    <NavHeader />
    <div class="business-top-content">
      <h1>专属定制，打造贴合您的网站</h1>
      <h3>实现商业谋略与用户体验的和谐统一</h3>
    </div>
    <div class="business-top-bottom">
      <div class="business-top-bottom-item">
        <img src="@/assets/img/home/aiapp.png" alt="" />
        <p>AI企业应用</p>
      </div>
      <div class="business-top-bottom-item">
        <img src="@/assets/img/home/yyapp.png" alt="" />
        <p>医药营销应用</p>
      </div>
      <div class="business-top-bottom-item">
        <img src="@/assets/img/home/custom.png" alt="" />
        <p>定制化开发</p>
      </div>
      <div class="business-top-bottom-item" style="border: none">
        <img src="@/assets/img/home/delp.png" alt="" />
        <p>其他应用</p>
      </div>
    </div>
  </div>
  <div class="business-center">
    <div
      :class="['business-center-item', index % 2 == 0 ? '' : 'isleft']"
      v-for="(item, index) in businessItem"
    >
      <img
        :class="[
          'business-center-item-bgImg',
          index % 2 == 0 ? 'boxRadiusl' : 'boxRadiusr',
        ]"
        :src="item.bgImg"
        alt=""
      />
      <div class="business-center-item-text">
        <div class="business-center-item-text-entitle">{{ item.entitle }}</div>
        <div class="business-center-item-text-title">{{ item.title }}</div>
        <div class="business-center-item-text-desc">{{ item.desc1 }}</div>
        <div class="business-center-item-text-desc">{{ item.desc2 }}</div>
        <div class="business-center-item-text-iconList">
          <div
            class="business-center-item-text-iconList-item"
            v-for="ele in item.descList"
          >
            <div class="business-center-item-text-iconList-item-icon">
              <img :src="ele.icon" alt="" />
            </div>
            <div class="business-center-item-text-iconList-item-desc">
              {{ ele.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <BackTop />
  <pageBottom backColor="#f3f3f6" />
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue";
import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";

import item1 from "@/assets/img/business/aiyy.png";
import item2 from "@/assets/img/business/yyxx.png";
import item3 from "@/assets/img/business/dzhkf.png";
import item4 from "@/assets/img/business/qtyy.png";

import khfw from "@/assets/img/business/khfw.png";
import yygl from "@/assets/img/business/yygl.png";
import scyx from "@/assets/img/business/scyx.png";
import dmx from "@/assets/img/business/dmx.png";
import sjcj from "@/assets/img/business/sjcj.png";
import sjqx from "@/assets/img/business/sjqx.png";
import sjfx from "@/assets/img/business/sjfx.png";
import sjgl from "@/assets/img/business/sjgl.png";
import sjzt from "@/assets/img/business/sjzt.png";
import app from "@/assets/img/business/app.png";
import xcx from "@/assets/img/business/xcx.png";
import wzjs from "@/assets/img/business/wzjs.png";
import kqxt from "@/assets/img/business/kqxt.png";
import sjxt from "@/assets/img/business/sjxt.png";
import jkxt from "@/assets/img/business/jkxt.png";
import xlfx from "@/assets/img/business/xlfx.png";

let businessItem = reactive([
  {
    bgImg: item1,
    entitle: "-  AI Enterprise Application",
    title: "AI企业应用",
    desc1: "助力提升企业核心竞争力",
    desc2: "AI应用优化企业业务流程",
    descList: [
      { name: "客户服务", icon: khfw },
      { name: "运营管理", icon: yygl },
      { name: "市场营销", icon: scyx },
      { name: "企业大模型训练", icon: dmx },
    ],
  },
  {
    bgImg: item2,
    entitle: "-   Application of Pharmaceutical Marketing",
    title: "医药营销应用",
    desc1: "拓展市场，守护健康",
    desc2: "助推医药产品落地生根",
    descList: [
      { name: "渠道数据采集", icon: sjcj },
      { name: "渠道数据清洗", icon: sjqx },
      { name: "渠道数据分析", icon: sjfx },
      { name: "主数据管理", icon: sjgl },
    ],
  },
  {
    bgImg: item3,
    entitle: "-   Custom Development",
    title: "定制化开发",
    desc1: "精准匹配企业需求",
    desc2: "助力企业数字化转型",
    descList: [
      { name: "渠道数据中台", icon: sjzt },
      { name: "APP开发", icon: app },
      { name: "小程序开发", icon: xcx },
      { name: "网站建设", icon: wzjs },
    ],
  },
  {
    bgImg: item4,
    entitle: "-   Other Applications",
    title: "其他应用",
    desc1: "雕琢高品质数字生活",
    desc2: "铸就卓越生活品质",
    descList: [
      { name: "HR考勤汇总系统", icon: kqxt },
      { name: "审计管理系统", icon: sjxt },
      { name: "舆情监控系统", icon: jkxt },
      { name: "电商产品销量分析", icon: xlfx },
    ],
  },
]);
</script>
<style lang="scss" scoped>
.business-top {
  background-image: url("@/assets/img/business/bg.png");
  background-size: 100% 100%;
  height: 100vh;
  background-repeat: no-repeat;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    margin-left: 18%;
    top: 45%;
    h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 35px;
    }
  }
  &-bottom {
    display: flex;
    justify-content: space-around;
    width: 70%;
    text-align: center;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%);
    &-item {
      border-right: 1px solid #666;
      width: 25%;
      img {
        width: 17%;
        margin-bottom: 10px;
      }
    }
  }
}
.business-center {
  color: #666666;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  background-color: #f3f3f6;

  &-item {
    display: flex;
    border-radius: 15px;
    border: 1px solid #eee;
    // box-shadow: 0 2px 6px 0;
    margin: 10px auto;
    width: 70%;
    background-color: #fff;

    &-bgImg {
      width: 50%;
    }
    &-text {
      padding: 50px 60px 20px 60px;
      width: 60%;
      &-entitle {
        font-weight: 700;
        font-size: 17px;
      }
      &-title {
        font-weight: 900;
        color: #000;
        font-size: 32px;
        margin-bottom: 30px;
      }
      &-desc {
        margin-bottom: 15px;
        font-size: 18px;
      }
      &-iconList {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 100px;
        &-item {
          width: 25%;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          &-icon {
            width: 45%;
            height: 20px;
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
              width: 100%;
              margin: auto;
            }
          }
          &-desc {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.isleft {
  flex-direction: row-reverse;
}
.boxRadiusl {
  border-radius: 15px 0 0 15px;
}
.boxRadiusr {
  border-radius: 0 15px 15px 0;
}
</style>
